<?php  ?>

<div class="row-fluid sortable ui-sortable">
	<div id="gchart-daging-sapi" class="box span12">
		<div class="box-header well" data-original-title>
			<h2 id="action-title">Grafik Stok Daging Sapi</h2>
		</div>
		<div class="box-content">
			<div id="chart-daging-sapi" style="height:300px;">
			</div>
		</div>
	</div>
</div>

<script>
	/* Chart Pertambahan Pengurangan */
	function drawChartAllStok(){
		if($("#chart-daging-sapi").length)
		{
			<?php
				
				foreach($all_stok as $stok){
					echo 'var tahun'.$stok['tahun']['TAHUN'].' = [];';
					$i = 1;
					foreach($stok['monthly_stok'] as $s){
						if($i < 10) $month_num = "0".$s['BULAN'];
						else $i;
						echo '
							var myDate = "0000-'.$month_num.'-01";
							myDate = myDate.split("-");
							var newDate = myDate[1]+"/"+1+"/"+myDate[0];
							nd = new Date(newDate).getTime();
							tahun'.$stok['tahun']['TAHUN'].'.push([nd,parseInt('.$s['JUMLAH'].')]);
						';
						$i++;
					}
					
				}
			
			?>
			var plot = $.plot($("#chart-daging-sapi"),
					[<?php $i=1;
							foreach($all_stok as $stok){
								echo '{data: tahun'.$stok['tahun']['TAHUN'].', label: "Tahun '.$stok['tahun']['TAHUN'].'"}';
								if($i < count($all_stok)) echo ',';
								$i++;
							}
						
						?>], {					
					   series: {
						   lines: { show: true  },
						   points: { show: true }
					   },
					   grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
					   yaxis: { min: 0, max: <?php echo $max_stok; ?>+1 },
					   xaxis:  {mode: "time", timeformat: getMonthName("%m"), minTickSize: [1, "month"]},
					   colors: ["#539F2E", "#3C67A5"]
					 });
					 
					 

			function showTooltip(x, y, contents) {
				$('<div id="tooltip">' + contents + '</div>').css( {
					position: 'absolute',
					display: 'none',
					top: y + 5,
					left: x + 5,
					border: '1px solid #fdd',
					padding: '2px',
					'background-color': '#dfeffc',
					opacity: 0.80
				}).appendTo("body").fadeIn(200);
			}

			var previousPoint = null;
			$("#chart-daging-sapi").bind("plothover", function (event, pos, item) {
				$("#x").text(pos.x.toFixed(2));
				$("#y").text(pos.y.toFixed(2));

					if (item) {
						if (previousPoint != item.dataIndex) {
							previousPoint = item.dataIndex;

							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
								y = item.datapoint[1].toFixed(2),
								date = new Date(x/1000*1000),
								day = date.getDate(),
								month = date.getMonth()+1;
								//item.series.label
							showTooltip(item.pageX, item.pageY,
										"&nbsp;&nbsp;&nbsp;"+getMonthName(month)+" = "+y);
						}
					}
					else {
						$("#tooltip").remove();
						previousPoint = null;
					}
			});

			$("#chart-daging-sapi").bind("plotclick", function (event, pos, item) {
				if (item) {
					$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
					plot.highlight(item.series, item.datapoint);
				}
			});
			
			function getMonthName(month){
				if(month == '1') return "Januari";
				if(month == '2') return "Februari";
				if(month == '3') return "Maret";
				if(month == '4') return "April";
				if(month == '5') return "Mei";
				if(month == '6') return "Juni";
				if(month == '7') return "Juli";
				if(month == '8') return "Agustus";
				if(month == '9') return "September";
				if(month == '10') return "Oktober";
				if(month == '11') return "November";
				if(month == '12') return "Desember";
			}
		}
	}
	/* End Chart Pertambahan Pengurangan */
</script>